<template>
  <section class="xmv-badges xmv-wrap">
    <h4>表格</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <table class="c-table brand-condition-table">
        <tbody class="c-table__body">
          <tr class="c-table__row brand-condition-table__row">
            <td class="c-table__cell brand-condition-table__cell">品牌<span class="u-arrow u-arrows-down"></span>
            </td>
            <td class="c-table__cell brand-condition-table__cell">车系<span class="u-arrow u-arrows-down"></span>
            </td>
          </tr>
          <tr class="c-table__row brand-condition-table__row">
            <td class="c-table__cell brand-condition-table__cell">排量<span class="u-arrow u-arrows-down"></span>
            </td>
            <td class="c-table__cell brand-condition-table__cell">档位<span class="u-arrow u-arrows-down"></span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&lttable class="c-table brand-condition-table"&gt
  &lttbody class="c-table__body"&gt
    &lttr class="c-table__row brand-condition-table__row"&gt
      &lttd class="c-table__cell brand-condition-table__cell"&gt品牌&ltspan class="u-arrow u-arrows-down"&gt&lt/span&gt
      &lt/td&gt
      &lttd class="c-table__cell brand-condition-table__cell"&gt车系&ltspan class="u-arrow u-arrows-down"&gt&lt/span&gt
      &lt/td&gt
    &lt/tr&gt
    &lttr class="c-table__row brand-condition-table__row"&gt
      &lttd class="c-table__cell brand-condition-table__cell"&gt排量&ltspan class="u-arrow u-arrows-down"&gt&lt/span&gt
      &lt/td&gt
      &lttd class="c-table__cell brand-condition-table__cell"&gt档位&ltspan class="u-arrow u-arrows-down"&gt&lt/span&gt
      &lt/td&gt
    &lt/tr&gt
  &lt/tbody&gt
&lt/table&gt
        </code>
      </pre>
    </div>
    <div class="demo-markup-source u-letter-box--small c-text">
      <table class="c-table">
        <!-- <caption class="c-table__caption">Basic table</caption> -->
        <thead class="c-table__head">
          <tr class="c-table__row c-table__row--heading">
            <th class="c-table__cell">姓名</th>
            <th class="c-table__cell">年龄</th>
            <th class="c-table__cell">生日</th>
          </tr>
        </thead>
        <tbody class="c-table__body">
          <tr class="c-table__row">
            <td class="c-table__cell">张三</td>
            <td class="c-table__cell">22</td>
            <td class="c-table__cell">1999-08-09</td>
          </tr>
          <tr class="c-table__row">
            <td class="c-table__cell">张三</td>
            <td class="c-table__cell">22</td>
            <td class="c-table__cell">1999-08-09</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &lttable class="c-table"&gt
            &ltcaption class="c-table__caption"&gtBasic table&lt/caption&gt
            &ltthead class="c-table__head"&gt
              &lttr class="c-table__row c-table__row--heading"&gt
                &ltth class="c-table__cell"&gt姓名&lt/th&gt
                &ltth class="c-table__cell"&gt年龄&lt/th&gt
                &ltth class="c-table__cell"&gt生日&lt/th&gt
              &lt/tr&gt
            &lt/thead&gt
            &lttbody class="c-table__body"&gt
              &lttr class="c-table__row"&gt
                &lttd class="c-table__cell"&gt张三&lt/td&gt
                &lttd class="c-table__cell"&gt22&lt/td&gt
                &lttd class="c-table__cell"&gt1999-08-09&lt/td&gt
              &lt/tr&gt
              &lttr class="c-table__row"&gt
                &lttd class="c-table__cell"&gt张三&lt/td&gt
                &lttd class="c-table__cell"&gt22&lt/td&gt
                &lttd class="c-table__cell"&gt1999-08-09&lt/td&gt
              &lt/tr&gt
            &lt/tbody&gt
          &lt/table&gt
        </code>
      </pre>
    </div>
  </section>
</template>
<style lang="less" scoped>
.c-table {
  border: 1px solid #ccc;
}
.brand {
  &-condition {
    background: #fff;
    margin-bottom: 0.3rem;
    &-table {
      .brand-condition-table__row {
        &:first-child {
          .brand-condition-table__cell {
            border-top: 0;
          }
        }
        .brand-condition-table__cell {
          &:last-child {
            border-right: 0;
          }
        }
      }
      .brand-condition-table__cell {
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        position: relative;
        justify-content: center;
        font-size: 0.32rem;
        .u-arrow {
          right: 8%;
        }
      }
    }
  }
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>
